<template lang="pug">
.chartIndicators-wrapper
  span.btn-export.iconfont.icon-export
  ECharts.bar-chart(
    ref='barChart'
    auto-resize
    :options="options"
    @click="selectBar")
  span.btn-export.iconfont.icon-export(
    title='导出'
    @click="fileEvent('/pn/dpa/stat/avgPressure/export')")

</template>
<script>
/**
 * @name PartionInfo 平均压力柱状图
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示各地区平均压力
 *参数：
 */
export default {
  props: {
    callbackData: {
      areaId: Number,
      timeRange: Array,
      selectedData: Object
    }
  },
  data () {
    return {
      options: {
        color: ['#0000EE'],
        tooltip: {
          trigger: 'axis',
          formatter: (param) => {
            let format = ''
            format = param[0].name + '<br> &nbsp;'
            format = format.concat(param[0].marker + param[0].seriesName + '：' + (this.formatValue(param[0].value * 100) || '-') + ' m')
            return format
          },
          axisPointer: {
            type: 'cross',
            label: {
              show: false
            }
          },
          textStyle: {
            fontSize: 12,
            fontWeight: 'bold',
            fontFamily: 'Microsoft YaHei'
          }
        },
        grid: [
          {left: 40, right: 12, y: '15%', height: '65%'}
        ],
        xAxis: [
          {
            type: 'category',
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            name: '平均压力(m)',
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均压力',
            type: 'bar',
            barWidth: '50%',
            color: '#0000ee',
            data: [],
            markPoint: {
              symbol: 'pin',
              symbolSize: (value, params) => {
                let width = this.formatValue(value * 100).length * 14
                width = (width < 40) ? 40 : width
                return [width, 40]
              },
              label: {
                formatter: ({seriesName, name, value}) => {
                  return `${this.formatValue(value * 100) || '-'}`
                }
              },
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            }
            // markPoint: {
            //   symbolSize: 1,
            //   symbolOffset: [0, '50%'],
            //   label: {
            //     normal: {
            //       offset: [0, -15],
            //       formatter: ({seriesName, name, value}) => {
            //         return `${seriesName}${name}：${(value).toFixed(3) + ' m'}`
            //       },
            //       backgroundColor: 'rgba(0,0,0,0.7)',
            //       borderRadius: 15,
            //       padding: [4, 10],
            //       lineHeight: 15,
            //       height: 15,
            //       distance: 20,
            //       color: '#fff',
            //       textBorderColor: '#000',
            //       textBorderWidth: 1,
            //       fontSize: 12,
            //       fontWeight: 'bold',
            //       fontFamily: 'Microsoft YaHei'
            //     }
            //   },
            //   data: [
            //     {type: 'max', name: '最大值'},
            //     {type: 'min', name: '最小值'}
            //   ]
            // }
          }
        ],
        legend: {
          data: []
        }
      }
    }
  },
  methods: {
    getData () {
      this.$get({
        url: '/pn/dpa/stat/avgPressure',
        params: {
          // 'areaId': this.callbackData.areaId,
          'startTime': this.callbackData.timeRange[0].getTime(),
          'endTime': this.callbackData.timeRange[1].getTime()
        }
      }).then((res) => {
        this.options.series[0].data = res.data.map((item) => (parseFloat(item.value) * 100).toFixed(3))
        this.options.xAxis[0].data = res.data.map((item) => item.name)
        this.$nextTick(() => {
          this.highlightBar(0, this.callbackData.selectedData.dataIndex)
        })
      })
    },
    selectBar (params) {
      this.$emit('selectAreaPie', params)
    },
    highlightBar (seriesIndex, dataIndex) {
      this.$refs.barChart.dispatchAction({
        type: 'highlight',
        seriesIndex,
        dataIndex
      })
      this.$refs.barChart.dispatchAction({
        type: 'showTip',
        seriesIndex,
        dataIndex
      })
    },
    formatValue (data) {
      return (data === null || data === undefined) ? null : parseFloat(data).toFixed(3)
    },
    fileEvent (url, filterBy) {
      this.$get({
        url,
        params: {
          'startTime': this.callbackData.timeRange[0].getTime(),
          'endTime': this.callbackData.timeRange[1].getTime()
        }
      }).then((res) => {
        // 生成a标签，模拟click下载files
        if (!res.data) {
          this.$alert('导出失败！')
          return
        }
        let a = document.createElement('a')
        a.href = `/api/dxbase/download/${res.data.shortUrl}`
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
        event.stopPropagation()
        event.preventDefault()
      })
    },
    changeMapHeight (clientHeight) {
      this.$refs.mapPage.style.height = clientHeight + 'px'
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang="sass" scoped>
.chartIndicators-wrapper
  width: 100%
  background-color: lightblue
  flex-grow: 1
  height: 50px
  position: relative
  .btn-export
    color: #a0a0a0
    font-size: 20px
    position: absolute
    right: 12px
    top: 12px
    cursor: pointer
  .bar-chart
    width: 100%
    height: 100%
    background-color: #fff
</style>
